import { Component, useState, useEffect } from "react";
import { View, Image, Textarea, Icon, Text, Input } from "@tarojs/components";
import XzNavition from "../../components/navigation";
import "./index.scss";
import classNames from "classnames";

// 更多
const moreImg = require("../../assets/images/publish/more.png");
const downImg = require("../../assets/images/publish/down.png");
const topImg = require("../../assets/images/publish/top.png");
function MoreTags() {
  const [isShowTags, setShowTags] = useState(false);
  return (
    <View className="publish__tags">
      <View className="tags__header">
        <Image src={moreImg} className="tags__header--icon"></Image>
        <Text>分类/更多</Text>
        <Image
          src={isShowTags ? topImg : downImg}
          className="tags__header--tap"
          onClick={() => setShowTags(!isShowTags)}
        ></Image>
      </View>
      {/* tags */}
      <View
        className={classNames("tags__content", {
          "tags__content-disabled": !isShowTags,
        })}
      >
        {[1, 2, 3, 4, 5, 6].map((item) => (
          <View
            className={classNames("tags__content--tag", {
              "tags__content--tag-active": item == 1,
            })}
          >
            其它闲置
          </View>
        ))}
      </View>
    </View>
  );
}
// 价格
const priceImg = require("../../assets/images/publish/money.png");
function ProductPrice() {
  const [price, setPrice] = useState("￥0.00");
  function priceInputChange(e) {
    const number = e.detail.value;
    // const priceReg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/;
    setPrice(number);
  }
  return (
    <View className="publish__tags publish__price">
      <View className="tags__header">
        <Image src={priceImg} className="tags__header--icon"></Image>
        <Text>价格</Text>
      </View>
      <Input
        type="digit"
        value={price}
        onInput={priceInputChange}
        className="price-input"
      />
    </View>
  );
}
function Publish() {
  return (
    <View className="publish">
      <Textarea
        placeholder="请输入商品介绍"
        className="publish__input"
      ></Textarea>
      <View className="publish__imgs">
        <View className="publish__imgs__upload">
          <Image
            src="http://img.mm4000.com/file/d/e0/7728be28a5_1044.jpg"
            className="upload--img"
            mode="aspectFill"
          ></Image>
          <Icon
            size="20"
            type="clear"
            color="#ffd460"
            className="upload--clear"
          />
        </View>
        <View className="publish__imgs__upload">
          <Image
            src="http://img.mm4000.com/file/d/e0/7728be28a5_1044.jpg"
            className="upload--img"
            mode="aspectFill"
          ></Image>
          <Icon
            size="20"
            type="clear"
            color="#ffd460"
            className="upload--clear"
          />
        </View>
        {/* 上传 */}
        <View className="publish__imgs__upload-icon">上传</View>
      </View>
      {/* 分类 */}
      <MoreTags />
      {/* 价格 */}
      <ProductPrice />
      {/* 发布button */}
      <View className="publish__button">发 布</View>
    </View>
  );
}

export default Publish;
